<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue demo 06 循环对象</title>
</head>
<body>
<div id="box">
    <p v-for="item in object">
        {{item}}
    </p>
    <h1>遍历属性、值、索引</h1>
    <p v-for="(index, key, value) in object">
        {{index}}: {{key}}: {{value}}
    </p>

    <ul>
        <li v-for="(value, index) in items" key="index" @click="onclick(index)">
            {{index}}: {{value}}
        </li>
    </ul>

</div>
</body>
<script>
    // 定义全局变量
    let vm = new Vue({
        el: "#box",
        data: {
            object: {
                name: "john",
                age: 21,
                sex: "男",
            },

            items: ['apple', ' banana', 'tomato', 'watermelon'],
        },
        methods: {
            onclick(index) {
                alert(index);
            }
        }
    });
</script>
</html>